<!--
 * @Description:
 * @version:
 * @Author: 尹鹏孝
 * @Date: 2023-03-09 17:03:19
 * @LastEditors: 尹鹏孝
 * @LastEditTime: 2023-03-10 14:26:57
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>mvvm和mvc</title>
</head>
<body>
mvvm:model,view,view-model:模式
view 和view-model的双向数据绑定。这能使view 改变数据传递到view-model，view-model改变数据更新在view。

<input id="id" />
 <div id="dom"></div>
<script>
let id =document.getElementById("id")
let obj={};
Object.defineProperty(obj,'inputValue',{
    get:function(){
        return 19;
    },
    set:function(val){
        document.getElementById('dom').innerHTML=val;
    }
})

document.getElementById("id").addEventListener("input",(event)=>{
    obj.inputValue = event.target.value;
})
//双向数据绑定===========


</script>
mvc:工作流程是模型和视图还有控制器之间的协作，模型放数据，控制器控制逻辑，他们之间数据是单向流动，模型驱动，控制器修改视图，视图变化通过控制器修改模型。
而mvvm是双向数据流，
模型放数据，v放视图，vm是视图模型，当模型或者视图模型发生变化，都会通过事假通知彼此。mvvm是mvc的增强版本，mvc劣势是直接操作dom性能可能会有问题。
</body>
</html>